<template>
  <div class="itempanel_header">
    <div class="itempanel_header_left">
      <ItemImgHead
        :item="item"
        :isBigHead="isBigHead"
        :isAddContent="isAddContent"
      ></ItemImgHead>
      <div class="itempanel_header_left_user" :class="isBigHead ? 'on' : ''">
        <router-link :to="{ name: 'USER', params: { usid: item.userId } }">
          <span class="itempanel_header_nickname">{{ item.nickName }}</span>
        </router-link>
        <router-link
          :to="{ name: 'POSITION', params: { position: item.position } }"
        >
          <span class="itempanel_header_position">{{ item.position }}</span>
        </router-link>
      </div>
    </div>
    <div class="itempanel_header_right">
      <slot name="itemPanelHeaderMenu" :sitem="item"></slot>
    </div>
  </div>
</template>
<script>
export default {
  name: "ItemPanelHeader",
  props: {
    item: {
      type: Object,
      default() {
        return {
          userHead: "",
          nickName: "undefined",
          position: "中国",
        };
      },
    },
    isBigHead: {
      type: Boolean,
      default() {
        return false;
      },
    },
    isAddContent: {
      type: Boolean,
      default() {
        return false;
      },
    },
  },
  components: {
    ItemImgHead: () =>
      import(
        /* webpackChunkName: "itemPanelHeader" */ "../../../components/common/itemImgHead"
      ),
  },
  data() {
    return {};
  },
};
</script>
<style lang="less">
@base: 23.44rem;
.itempanel_header {
  display: flex;
  padding: 10 / @base;
  .itempanel_header_left {
    width: 75%;
    display: flex;
    overflow: hidden;
    .itempanel_header_left_user {
      margin: 2 / @base 0 0 10 / @base;
      width: 90%;
      overflow: hidden;
      text-align: left;
      &.on {
        padding: 10 / @base 0;
      }
      .itempanel_header_nickname {
        display: block;
        font-weight: 700;
      }
      .itempanel_header_position {
        display: block;
        font-size: 12 / @base;
      }
    }
  }
  .itempanel_header_right {
    width: 25%;
  }
}
</style>
